<!-- 模仿天猫整站springboot 教程 为how2j.cn 版权所有-->
<!-- 本教程仅用于学习使用，切勿用于非法用途，由此引起一切后果与本站无关-->
<!-- 供购买者学习，请勿私自传播，否则自行承担相关法律责任-->

<div th:fragment="html"> 
	<script>
		$(function(){
			var oid = getUrlParms("oid");
	        var data4Vue = {
	        		uri:'forereview',
	        		orders:[],
	        		p:'',
	        		o:null,
	        		reviews:[],
	        		showReviews:false,
	        		content:''
	        };
	        //ViewModel
	        var vue = new Vue({
	            el: '#workingArea',
	            data: data4Vue,
	            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
	            	this.load();
	            },        
	            methods: {     	
	            	load:function(){
	                    var url =  this.uri+"?oid="+oid;
	                    axios.get(url).then(function(response) {
	                    	var result = response.data;
	                    	vue.p = result.data.p;
	                    	vue.o = result.data.o;
	                    	vue.reviews = result.data.reviews;
	                        vue.$nextTick(function(){
	        	            	linkDefaultActions();
	                        })
	                    });
	            	},
	            	doreview:function(){
	                    var url =  "foredoreview?oid="+vue.o.id+"&pid="+vue.p.id+"&content="+vue.content;
	                    axios.post(url).then(function(response) {
	                    	var result = response.data;
	                    	vue.showReviews = true;
	                    	vue.load();
	                    });
	            	}
	            }
	        });       			
		})	
	</script>
	<div class="reviewDiv">
		<div class="reviewProductInfoDiv">
			<div class="reviewProductInfoImg"><img v-if="null!=p.firstProductImage" width="400px" height="400px" :src="'img/productSingle/'+p.firstProductImage.id+'.jpg'"></div>
			<div class="reviewProductInfoRightDiv">
				<div class="reviewProductInfoRightText">
					{{p.name}}
				</div>
				<table class="reviewProductInfoTable">
					<tr>
						<td width="75px">价格:</td>
						<td><span class="reviewProductInfoTablePrice">￥{{p.originalPrice|formatMoneyFilter}}</span> 元 </td>
					</tr>
					<tr>
						<td>配送</td>
						<td>快递:  0.00</td>
					</tr>
					<tr>
						<td>月销量:</td>
						<td><span class="reviewProductInfoTableSellNumber">{{p.saleCount}}</span> 件</td>
					</tr>
				</table>
				
				<div class="reviewProductInfoRightBelowDiv">
					<span class="reviewProductInfoRightBelowImg"><img1 src="img/site/reviewLight.png"></span>
					<span v-if="null!=o" class="reviewProductInfoRightBelowText" >现在查看的是 您所购买商品的信息
	于 {{o.createDate | formatDateFilter('YYYY-MM-DD')}} 下单购买了此商品 </span>
				
				</div>
			</div>
			<div style="clear:both"></div>
		</div>
		<div class="reviewStasticsDiv">
			<div class="reviewStasticsLeft">
					<div class="reviewStasticsLeftTop"></div>
					<div class="reviewStasticsLeftContent">累计评价 <span class="reviewStasticsNumber"> {{p.reviewCount}}</span></div>
					<div class="reviewStasticsLeftFoot"></div>
			</div>
			<div class="reviewStasticsRight">
				<div class="reviewStasticsRightEmpty"></div>
				<div class="reviewStasticsFoot"></div>
			</div>
		</div>		
		
		<div v-show="showReviews" class="reviewDivlistReviews">
				<div v-for="r in reviews" class="reviewDivlistReviewsEach">
					<div class="reviewDate">{{r.createDate| formatDateFilter}}</div>
					<div class="reviewContent">{{r.content}}</div>
					<div class="reviewUserInfo pull-right">{{r.user.anonymousName}}<span class="reviewUserInfoAnonymous">(匿名)</span></div>
				</div>
		</div>
		
		<div v-show="!showReviews" class="makeReviewDiv">
				<div class="makeReviewText">其他买家，需要你的建议哦！</div>
				<table class="makeReviewTable">
					<tr>
						<td class="makeReviewTableFirstTD">评价商品</td>
						<td><textarea v-model="content"></textarea></td>
					</tr>
				</table>
				<div class="makeReviewButtonDiv">
					<button @click="doreview" type="submit">提交评价</button>
				</div>
		</div>	
	</div>
</div>
